<template>
  <div>
    <MyHeader bgColor="#a0c591" fontColor="#b266b8" title="爱车" />
    <div class="list" style="padding: 45px 0 50px">
      <MyGoods v-for="obj in list" :key="obj.id" :goodsObj="obj" />
    </div>
    <MyFooter
      @isChangeAll="babaChangeAll"
      :isChecked="isSelectAll"
      :totalCount="countAll"
      :countPrice="priceAll"
    />
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyFooter from "./components/MyFooter.vue";
import MyGoods from "./components/MyGoods.vue";

export default {
  computed: {
    isSelectAll() {
      return this.list.every((item) => item.goods_state);
    },
    countAll() {
      return this.list.reduce((sum, val) => {
        if (val.goods_state) {
          sum += val.goods_count;
        }
        return sum;
      }, 0);
    },
    priceAll(){
         return this.list.reduce((sum, val) => {
        if (val.goods_state) {
          sum += val.goods_count*val.goods_price;
        }
        return sum;
      }, 0);
    }
  },
  methods: {
    babaChangeAll(checked) {
      this.list.forEach((item) => (item.goods_state = checked));
    },
  },
  data() {
    return {
      list: [],
    };
  },
  async created() {
    const resp = await this.$http({
      methos: "GET",
      url: "/api/cart",
    });
    this.list = resp.data.list;
    console.log(resp.data.list);
  },
  components: {
    MyHeader,
    MyFooter,
    MyGoods,
  },
};
</script>

<style>
</style>